<ul class="addr-list addr-list2 clearfix js_addressUl">
  {foreach $list as $k=>$v}
  <li class="js_addressLi {if $v.is_default}curr{/if}" {if $v.is_default}is-default="1"{/if} id-data="{$v.id}">
    <div class="top clearfix">
      <h4 class="name left">收货人：{$v.receivers}</h4>
      <span class="tel right">{$v.phone}</span>
    </div>
    <div class="txt">收货地址：{$v.province}{$v.city}{$v.district}{$v.address}</div>
    <div class="tips1 clearfix">
      {if $v.is_default}
      <a href="javascript:void(0);" class="left">默认</a>
      {else}
      <a href="javascript:void(0);" class="left js_setDefaultAddress hide">设为默认</a>
      {/if}
      <a href="javascript:void(0);" class="right js_deleteAddress">删除</a>
      <a href="javascript:void(0);" class="right js_editAddress">编辑</a>
    </div>
  </li>
  {/foreach}
  <li class="add js_addNewAddress"><a href="javascript:void(0);">+添加新地址</a></li>
</ul>
<div class="line1 hide"></div>
<div class="addr-form2 hide js_addressForm">
  <form>
    <div class="item clearfix">
      <label class="left"></label>
      <select class="select1 left" name="prov" id="prov" style="width:auto;">
        <option value="请选择..."></option>
      </select>
      <span class="tips1 left">省*</span>
      <select class="select1 left" name="city" id="city" style="width:auto;">
        <option value="请选择..."></option>
      </select>
      <span class="tips1 left">市*</span>
      <select class="select1 left" name="dist" id="dist" style="width:auto;">
        <option value="请选择..."></option>
      </select>
      <span class="tips1 left">区*</span>
      <input type="hidden" value="" class="js_addressId" />
      <input type="hidden" value="" ctag="prov" id="pre_province"/>
      <input type="hidden" value="" ctag="city" id="pre_city"/>
      <input type="hidden" value="" ctag="dist" id="pre_district"/>
    </div>
    <div class="item clearfix">
      <label class="left">邮政编码*</label>
      <input type="text" class="input1 left js_code" id="pre_post" is-use="1">
      <span class="tips1 left">邮政编码必须为6位数</span>
    </div>
    <div class="item clearfix">
      <label class="label2 left">详细地址*</label>
      <textarea class="textarea1 left js_address"></textarea>
      <div class="tips2 left">
        <p>请填写街道地址，</p>
        <p>最少5个字，最多100字</p>
      </div>
    </div>
    <div class="item clearfix">
      <label class="left">收货人*</label>
      <input type="text" class="input1 left js_receivers">
      <span class="tips1 left">收货人不能为空</span>
    </div>
    <div class="item clearfix">
      <label class="left">联系电话*</label>
      <input type="text" class="input1 left js_addressPhone">
      <span class="tips1 left">手机</span>
    </div>
    <div class="item clearfix">
      <label class="left"></label>
      <input type="text" class="input1 input2 left js_phoneCode" id="pre_code">
      <span class="tips1 left">—</span>
      <input type="text" class="input1 input3 left js_telephone">
      <span class="tips1 left">住宅</span>
    </div>
    <div class="">
      <button type="submit" class="left js_submitAddress">保存修改</button>
      <button type="reset" class="left js_submitAddress" set-default="1">设为默认</button>
    </div>
  </form>
</div>
{load_js file='address/address_area.js'}
{load_js file='address/address_code.js'}
<script>
$(function(){
  var defaultForm = $('.js_addressForm').html();
  $('.js_addressUl').on('mouseenter', '.js_addressLi', function(){
    $(this).find('.js_setDefaultAddress').removeClass('hide');
  });
  $('.js_addressUl').on('mouseleave', '.js_addressLi', function(){
    $(this).find('.js_setDefaultAddress').addClass('hide');
  });
  
  // 设为默认
  $('.js_addressUl').on('click', '.js_setDefaultAddress', function(){
    var currLI    = $(this).parent().parent();
    var oldLI     = $('.js_addressLi[is-default=1]');
    var addressId = currLI.attr('id-data');
    $.post("{AnUrl('address/set_default_address')}", { id:addressId }, function(data){
      if (data.info == 'ok') {
        changeDefault(oldLI, currLI);
      } else {
        showMsg(data.info);
      }
    }, 'json');
  });
  
  // 添加地址
  $('.js_addNewAddress').click(function(){
    $('.js_addressForm').removeClass('hide');
    $('.js_addressForm').prev().removeClass('hide');
    $('.js_setCurrDefaults').css('display', 'block');
    $('input').val('');
    $('textarea').val('');
    citySelector.Init();
  });
  
  
  // 编辑地址
  $('.js_addressUl').on('click', '.js_editAddress', function(){
    $('.js_setCurrDefaults').css('display', 'block');
    $('.js_addressForm').removeClass('hide');
    $('.js_addressForm').prev().removeClass('hide');
    var currLI    = $(this).parent().parent();
    var addressId = currLI.attr('id-data');
    var isDefault = currLI.attr('is-default');
    if (isDefault) {
      $('.js_setCurrDefaults').css('display', 'none');
    }
    $.post("{AnUrl('address/get_address')}", { id:addressId }, function(data){
      if (data.info == 'ok') {
        $('.js_addressId').val(data.address.id);
        $('#pre_province').val(data.address.province);
        $('#pre_city').val(data.address.city);
        $('#pre_district').val(data.address.district);
        citySelector.Init();
        $('.js_address').val(data.address.address);
        $('.js_receivers').val(data.address.receivers);
        $('.js_addressPhone').val(data.address.phone);
        var telePhone = data.address.telephone .split('-');
        if (telePhone[0]) {
          $('.js_phoneCode').val(telePhone[0]);
        }
        if (telePhone[1]) {
          $('.js_telephone').val(telePhone[1]);
        }
        if (data.address.code > 0) {
          $('.js_code').val(data.address.code);
        }
      } else {
        showMsg(data.info);
      }
    }, 'json');
  });
  
  // 保存地址
  $('.js_submitAddress').click(function(e){
    e.preventDefault();
    var setDefault = $(this).attr('set-default');
    var addressId = $('.js_addressId').val();
    var province  = $('#pre_province').val();
    var city      = $('#pre_city').val();
    var district  = $('#pre_district').val();
    var address   = $('.js_address').val();
    var receivers = $('.js_receivers').val();
    var phone     = $('.js_addressPhone').val();
    var code      = $('.js_code').val();
    var phoneCode = $('.js_phoneCode').val();
    var telephone = $('.js_telephone').val();

    if (!province) {
      showMsg('请选择省份');
      return;
    }
    if (!city) {
      showMsg('请选择城市');
      return;
    }
    if (!district) {
      showMsg('请选择区县');
      return;
    }
    if (!code || code.length != 6 || !code.match(/[0-9]+/)) {
      showMsg('请填写正确的邮编号码');
      return;
    }
    if (!address || address.length<5 || address.length>100) {
      showMsg('详细地址最少5个字，最多100个字');
      return;
    }
    if (!receivers) {
      showMsg('请填写收货人');
      return;
    }
    if (!phone || phone.length != 11 || !phone.match(/1[3|4|5|7|8][0-9]+/)) {
      showMsg('填写收货人手机号码');
      return;
    }
    if (phoneCode && telephone) {
        if (telephone.length < 6 || !telephone.match(/[0-9]+/)) {
          showMsg('请填写正确的座机号码');
          return;
        }
    }
    $.post("{AnUrl('address/save_address')}", { 
      id         :addressId,
      province   :province,
      city       :city,
      district   :district,
      address    :address,
      receivers  :receivers,
      phone      :phone,
      code       :code,
      phone_code :phoneCode,
      telephone  :telephone,
      is_default :setDefault,
    }, function(data){
      if (data.info == 'ok') {
        if (addressId) {
            var addressLi = $('.js_addressLi[id-data='+addressId+']');
            addressLi.find('h4').html('收货人：'+receivers);
            addressLi.find('span').html(phone);
            addressLi.children().eq(1).html('收货地址：' + province + city + district + address);
          } else {
            $('.js_addNewAddress').before('<li class="js_addressLi" id-data="'+ data.id +'">\
                                          <div class="top clearfix">\
                                            <h4 class="name left">收货人：'+ receivers +'</h4>\
                                            <span class="tel right">'+ phone +'</span>\
                                          </div>\
                                          <div class="txt">收货地址：'+ province+city+district+address +'</div>\
                                          <div class="tips1 clearfix">\
                                            <a href="javascript:void(0);" class="left js_setDefaultAddress hide">设为默认</a>\
                                            <a href="javascript:void(0);" class="right js_deleteAddress">删除</a>\
                                            <a href="javascript:void(0);" class="right js_editAddress">编辑</a>\
                                          </div>\
                                        </li>');
          }
          if (setDefault == 1 || data.is_default == 1) {
            var currLI = $('.js_addNewAddress').prev();
            var oldLI  = $('.js_addressLi[is-default=1]');
            if (addressId) {
              changeDefault(oldLI, addressLi);
            } else {
              changeDefault(oldLI, currLI);
            }
          }
          $('.js_addressForm').addClass('hide');
          $('.js_addressForm').prev().addClass('hide');
          location.href = "";
      } else {
        showMsg(data.info);
      }
    }, 'json');
  });

  // 删除地址
  $('.js_addressUl').on('click', '.js_deleteAddress', function(){
    var currLI    = $(this).parent().parent();
    var addressId = currLI.attr('id-data');
    var isDefault = currLI.attr('id-default');
    showConfirm('确定要删除该地址？', 0, function(){
      $.post("{AnUrl('address/delete_address')}", { id:addressId }, function(data){
        if (data.info == 'ok') {
          currLI.remove();
          if (data.new_default > 0) {
            var newLI     = $('.js_addressLi[id-data='+data.new_default+']');
            newLI.attr('is-default', '1');
            newLI.addClass('curr');
            newLI.children().eq(2).children().eq(0).removeClass('js_setDefaultAddress');
            newLI.children().eq(2).children().eq(0).removeClass('hide');
            newLI.children().eq(2).children().eq(0).html('默认');
          }
        } else {
          showMsg(data.info);
        }
      }, 'json');
    });
  });
});
  
// 更改默认设置显示样式
function changeDefault(oldLI, currLI)
{
  oldLI.attr('is-default', '');
  oldLI.removeClass('curr');
  oldLI.children().eq(2).children().eq(0).addClass('js_setDefaultAddress');
  oldLI.children().eq(2).children().eq(0).addClass('hide');
  oldLI.children().eq(2).children().eq(0).html('设为默认');
  currLI.attr('is-default', '1');
  currLI.addClass('curr');
  currLI.children().eq(2).children().eq(0).removeClass('js_setDefaultAddress');
  currLI.children().eq(2).children().eq(0).removeClass('hide');
  currLI.children().eq(2).children().eq(0).html('默认');
}
</script>